<!-- 机构注册-申请入驻 -->
<template>
	<view class="container">
		<!-- 步骤条 -->
		<u-steps :list="stepsList" :current="0" active-color="#03B8CD" mode="number">
		</u-steps>

		<!-- 表单区域 -->
		<view class="form-container">
			<u-form :model="form" ref="form" :rules="rules">
				<!-- 负责人姓名 -->
				<u-form-item label="负责人姓名:" prop="contactName" label-width="160">
					<u-input v-model="form.contactName" placeholder="请输入负责人姓名" clearable />
				</u-form-item>

				<!-- 负责人岗位 -->
				<u-form-item label="职务/岗位:" prop="contactPost" label-width="160">
					<u-input v-model="form.contactPost" placeholder="请输入负责人职位/岗位" clearable />
				</u-form-item>


				<!-- 负责人手机 -->
				<u-form-item label="负责人手机:" prop="contactPhone" label-width="160">
					<u-input v-model="form.contactPhone" placeholder="请输入真实可用的负责人手机号" clearable type="number" />
				</u-form-item>
			</u-form>

			<!-- 协议勾选 -->
			<view class="agreement">
				<u-checkbox-group>
					<u-checkbox v-model="form.agreed" shape="circle" active-color="#2979ff">
						阅读并同意《企业入驻协议》
					</u-checkbox>
				</u-checkbox-group>
			</view>

			<!-- 下一步按钮 -->
			<u-button type="primary" :custom-style="btuStyle"  @click="handleNext" :loading="loading" shape="circle" class="next-btn">
				下一步
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btuStyle: {
					"backgroundColor": "#03B8CD",
					"color":"#ffffff"
				},
				loading: false,
				// 微信code
				wxcode: '2636e646cb51b89a59c6d3150e245253',
				loginPhoneno: '', ////登录机构用户手机号
				// 步骤条
				stepsList: [{
						name: "手机号"
					},
					{
						name: "营业执照"
					},
					{
						name: "企业信息"
					}
				],
				form: {
					contactName: '',
					contactPost: '',
					contactPhone: '',
				},
				// 是否同意
				agreed: false,
				// 输入框验证
				rules: {
					contactName: [{
						required: true,
						message: '请输入联系人姓名',
						trigger: 'blur'
					}],
					contactPhone: [{
							required: true,
							message: '请输入手机号',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号格式不正确',
							trigger: ['blur', 'change']
						}
					]
				}
			}
		},
		// 修改入驻申请时用到
		onLoad(options) {
			this.loginPhoneno = options.phoneno
		},
		onShow() {
			uni.setStorageSync('phone',this.loginPhoneno)
			if(this.loginPhoneno != '') {
				this.$u.api.queryjguser({
					phoneno: this.loginPhoneno
				}).then(res =>{
					console.log('入驻:',res)
					// this.updateDate = res.data					
					// 修改信息
					const base = res.data.base_info.base
					this.form.contactPhone = base.user_phoneno
					this.form.contactName = base.user_name
					this.form.contactPost = base.user_dev
				})
				
			}
		},
		methods: {
			async handleNext() {
				// 表单验证
				this.$refs.form.validate(valid => {
					if (!valid) return;

					if (!this.form.agreed) {
						return this.$u.toast('请先阅读并同意协议！');
					}
					if (this.$u.test.isEmpty(this.form.contactName) || this.$u.test.isEmpty(this.form.contactPost)) {
						return this.$u.toast('姓名与职位不能为空！');
					}
					
					if (!this.$u.test.mobile(this.form.contactPhone)) {
						return this.$u.toast('手机号或格式不对！')
					}

					this.loading = true;
					// 调用申请入驻接口
					this.$u.api.regjguser({
						"phoneno": this.form.contactPhone,
						"wxcode": this.wxcode,
						"username": this.form.contactName,
						"userdev": this.form.contactPost,
					}).then(res =>{
						console.log('regjguser-1:',res,res.data.base_info.base.flow_id)
						// 审核中的机构
						uni.setStorageSync('flowid',res.data.base_info.base.flow_id)
						// 跳到下一步页面
							setTimeout(() => {
								this.loading = false;
								// 当修改入驻页面时，需要将手机号传到下一个页面
								uni.navigateTo({
									url: `/pages/Institution/settleIn/businessLicense?phoneno=${this.loginPhoneno}`
								});
							}, 1000);
						});
					})


			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 10rpx;
		background-color: #F1F7F7;
		min-height: 100vh;

		.header {
			margin-bottom: 40rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}

		/deep/ .u-steps {
			background: #fff;
			padding: 30rpx;
			border-radius: 12rpx;
			margin-bottom: 30rpx;
		}

		.form-container {
			background: #fff;
			padding: 40rpx;
			border-radius: 12rpx;

			.agreement {
				margin: 40rpx 0 60rpx;
				padding-left: 10rpx;
			}

			.next-btn {
				margin-top: 20rpx;
			}
		}
	}
</style>